<template>
  <page-container title="我的收藏">
	<scroll-view scroll-y class="collection-list">
		<view v-for="(item, index) in collectionList" :key="index" class="collection-item" >
			<image class="shop-image" :src="item.image" mode="aspectFill" @click="gotoStore"></image>
			<view class="content" @click="gotoStore">
				<view class="shop-name text-ellipsis">{{item.name}}</view>
				<view class="business-hours">
					<view class="viewbox">
						<image class="img" src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/time.png"
							mode="aspectFit"></image>
						<text>营业时间：{{item.businessHours}}</text>
					</view>
				</view>
			</view>
			<view class="right-content">
				<view class="distance">
					<image class="img"  src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/local.png"
						mode="aspectFit"></image>{{item.distance}}m
				</view>
				<view class="collected-btn" @click="cancel(item, index)">
					<image class="img" src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/foricon.png"
						mode="aspectFill"></image>已收藏
				</view>
				
			</view>
		</view>
		<view class="nulldata" v-if="!collectionList.length"> 没有收藏任何商家 </view>
	</scroll-view>
  </page-container>
</template>

<script lang="ts" src="./index.ts">
	
</script>

<style lang="scss" scoped>
.nulldata {
			width: 100%;
			padding: 40rpx 20rpx;
			text-align: center;
			font-size: 22rpx;
			color: #ccc;
		}
.collection-list {
	position: relative;
	z-index: 11;
	min-height: 40vh;
	background-color: #f7f7f7;
			.collection-item {
				margin: 20rpx;
				display: flex;
				// align-items: center;
				background: #fff;
				padding: 30rpx;
				margin-bottom: 12px;
				background: #ffffff;
				border-radius: 12rpx;
				box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);

				.shop-image {
					width: 85px;
					height: 85px;
					border-radius: 6px;
					margin-right: 12px;
					background: #f5f5f5;
				}

				.content {
					flex: 1;
					min-width: 0; // 解决文本溢出问题
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.shop-name {
						font-size: 17px;
						font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
						font-weight: 700;
						text-align: left;
						color: #000000;
					}

					.business-hours {
						font-size: 20rpx;
						color: #000;
						display: flex;
						align-items: center;

						.viewbox {
							padding: 0 8rpx;
							background: #ffffff;
							border: 1px solid #dfdfdf;
							border-radius: 4px;
							height: 48rpx;
							line-height: 48rpx;

							.img {
								width: 20rpx;
								height: 20rpx;
								position: relative;
								top: 5rpx;
								margin-right: 6rpx;
							}
						}

						.iconfont {
							color: #999;
							margin-right: 4px;
							font-size: 14px;
						}
					}
				}

				.right-content {
					text-align: right;
					margin-left: 12px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.distance {
						font-size: 20rpx;
						font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Regular;
						font-weight: 400;
						text-align: right;
						color: #646464;

						.img {
							width: 20rpx;
							height: 20rpx;
							position: relative;
							top: 2rpx;
							margin-right: 4rpx;
						}
					}

					.collected-btn {
						width: 128rpx;
						text-align: center;
						height: 48rpx;
						line-height: 48rpx;
						display: inline-block;
						// padding: 6px 12px;
						background: #FFE033;
						border-radius: 20px;
						font-size: 20rpx;
						color: #fff;
						font-weight: 500;

						.img {
							width: 28rpx;
							height: 28rpx;
							position: relative;
							top: 8rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
		}
</style> 